import React from 'react'
import { BarsOutlined, LineChartOutlined, DeploymentUnitOutlined, InsertRowAboveOutlined, YoutubeOutlined, TikTokOutlined, AppstoreAddOutlined } from '@ant-design/icons';
import './Wrok7.css'

function Wrok7() {
  return (
    <div>
      <div className='zujian'>
        <h3 className='zuH3'>组件</h3>
        <div className='spanIcon'>
          <span><BarsOutlined />
          </span><span>自定义</span>
        </div>
      </div>
      <div className='shuju'>
        <h4 className='shujuH4'>数据组件</h4>
        <div className='Icon'>
          <div className='tuIcon'>
            <p className='PIcon'><LineChartOutlined /></p>
            <p>图表</p>
          </div>
          <div className='tuIcon'>
            <p className='PIcon'><DeploymentUnitOutlined /></p>
            <p>图例</p>
          </div>
          <div className='tuIcon'>
            <p className='PIcon'><InsertRowAboveOutlined /></p>
            <p>表格</p>
          </div>
        </div>
      </div>
      <div className='shuju'>
        <h4 className='shujuH4'>功能组件</h4>
        <div className='Icon'>
          <div className='tuIcon'>
            <p className='PIcon'><YoutubeOutlined /></p>
            <p>视频</p>
          </div>
          <div className='tuIcon'>
            <p className='PIcon'><TikTokOutlined /></p>
            <p>音乐</p>
          </div>
          <div className='tuIcon'>
            <p className='PIcon'><AppstoreAddOutlined /></p>
            <p>二维码</p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Wrok7
